<template>
    <div class="detail">
        <d-header :title='title'><router-link class="back-home-icon" to='/'></router-link></d-header>
        <div class="container has-header">
            <div class="banner">
                <d-banner></d-banner>
            </div>
            <div class="card-box">
                <div class="card-time">
                    <div class="card-timebox">
                        <p class="card-num">第{{pidData.pid}}期</p> 
                        <p class="card-week" v-if='pidData.atime'>{{pidData.atime.substring(0,10)}}<span>[{{DegetDate(pidData.atime.substring(0,10))}}]</span></p>
                    </div> 
                    <div class="card-more" @click='showPidList'>更多期次<i></i></div>
                </div> 
                <div :class="'80,81,82,83'.indexOf(id)>-1?'card-vic':'card-ball'">
                    <template v-if='pidData.code&&pidData.code.indexOf("|")>-1'>
                        <em v-for='num1 in pidData.code.split("|")[0].split(",")'>{{num1}}</em>
                        <em class="blue-ball" v-for='num2 in pidData.code.split("|")[1].split(",")'>{{num2}}</em>
                    </template>
                    <template v-else >
                        <em v-for='num3 in pidData.code.split(",")'>{{num3}}</em>
                    </template>
                </div> 
                <div class="card-money">
                    <div class="card-monbox">
                        <p class="card-tit">本期全国销量</p> 
                        <p class="card-nums"><span>{{pidData.gsale}}</span></p>
                    </div> 
                    <div class="card-monbox">
                        <p class="card-tit">累计奖池</p> 
                        <p class="card-nums"><span>{{pidData.gpool}}</span></p>
                    </div>
                </div> 
            </div>

            <div class="detail-table">
                <table border="0" cellspacing="0" cellpadding="0" class="list-table">
                    <thead>
                        <tr>
                            <td>奖项</td>
                            <td v-if='lotteryId[id][2]'>中奖条件</td>
                            <td>中奖注数</td>
                            <td>单注奖金(元)</td>
                        </tr>
                    </thead>
                    <tbody v-if='pidData.ginfo'>
                        <tr v-for='(item,index) in pidData.ginfo.split(",")'>
                            <td class="td-leave">{{lotteryId[id][1]?(lotteryId[id][1].split('|')[index]):listTxt[index]}}</td>
                            <td v-if='lotteryId[id][2]'>{{ lotteryId[id][2].split('|')[index] }}</td>
                            <td class="td-zhu" v-if='pidData.ninfo'>{{  pidData.ninfo.split(",")[index]}}</td>
                            <td class="td-money">{{item}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <div class="detail-table" v-if='pidData.row'>
                <table border="0" cellspacing="0" cellpadding="0" class="list-table">
                    <colgroup>
                        <col width="15%"> 
                        <col width="20%"> 
                        <col width="10%"> 
                        <col width="20%"> 
                        <col width="15%"> 
                        <col width="15%">
                    </colgroup> 
                    <thead>
                        <tr><td>场次</td> <td>&nbsp;</td> <td>对阵</td> <td>&nbsp;</td> <td>比分</td> <td>赛果</td></tr>
                    </thead> 
                    <tbody>
                        <template v-if='id == 80 || id == 81'>
                            <tr v-for='(item,index) in pidData.row' :key='index' >
                                <td class="td-leave">{{item.id}}</td> 
                                <td class="td-txtr"><span>{{item.hn}}</span></td> 
                                <td class="td-vs">VS</td> 
                                <td class="td-txtl"><span>{{item.vn}}</span></td> 
                                <td class="td-score">{{item.hs+':'+item.vs}}</td> 
                                <td class="td-money" v-if='pidData.code'>{{pidData.code.split(",")[index]}}</td>
                            </tr>
                        </template>
                        <template v-if='id == 82 '>
                            <tr v-for='(item,index) in pidData.row' :key='index'> 
                                <td class="td-leave">{{item.id}}</td> 
                                <td class="td-txtr"><span>{{item.hn}}</span></td> 
                                <td class="td-vs">VS</td> 
                                <td class="td-txtl"><span>{{item.vn}}</span></td> 
                                <td class="td-score">{{item.hs+':'+item.vs}}</td> 
                                <td class="td-money" v-if='pidData.code'><div>{{pidData.code.split(",")[index*2]}}</div><div>{{pidData.code.split(",")[index*2+1]}}</div></td>
                            </tr>
                        </template>
                        <template v-if='id == 83 '>
                            <tr v-for='(item,index) in pidData.row' :key='index' v-if='index%2 == 0'>
                                <td class="td-leave">{{index/2+1}}</td> 
                                <td class="td-txtr" v-if='item.hn'><span>{{item.hn.substring(3)}}</span></td> 
                                <td class="td-vs">VS</td> 
                                <td class="td-txtl"><span>{{item.vn}}</span></td> 
                                <td class="td-score"><div>半{{item.hhs+':'+item.hvs}}</div><div>全{{item.hs+':'+item.vs}}</div></td> 
                                <td class="td-money" v-if='pidData.code'><div>{{pidData.code.split(",")[index]}}</div><div>{{pidData.code.split(",")[index+1]}}</div></td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>
            <div class="detail-btnbox">
                <div class="detail-btn" v-if='!("80,81,82,83".indexOf(id)>-1)' @click='goZst(id)'>走势图</div>
                <div class="detail-btn" v-if='zxList&&zxList.indexOf(id)>-1' @click='goInformation(id)'>资讯</div>
                <div class="detail-btn" @click='goExplain(id)'>玩法</div>
            </div>
            <div class="hot-news" v-if='zxList&&zxList.indexOf(id)>-1&&hotNewList4'>
                <div class="hot-title">热门资讯</div> 
                <ul class="hot-newlist">
                    <li 
                        v-for='(item,index) in hotNewList4' 
                        :key='index'
                        @click='goHotNew(item.url)'
                        >{{item.title}}</li>
                </ul>
            </div>
            <div class="banner">
                <ad-foot></ad-foot>
            </div>

            <!--期次-->
            <!-- <div class="mengceng show" style=""> -->
            <div :class="{'mengceng':1,'show':mengcengState}" >
                <div class="mask" @click.stop='hidePidList'></div> 
                <div class="fix-box">
                    <div class="bottom-title">
                        最近5期
                        <div class="bottom-close" @click.stop='hidePidList'></div>
                    </div> 
                    <div>
                        <ul class="bottom-con">
                            <li v-for='(item,index) in pidList5' :key='index'>
                                <div class="bot-time">
                                    <p class="bot-num">第{{item.pid}}期</p> 
                                    <p class="bot-week" v-if='item.et'>{{item.et.substring(0,10)}}&nbsp;<span>[{{DegetDate(item.et.substring(0,10))}}]</span></p>
                                </div> 
                                <div class="bot-ball">
                                    <template v-if='item.opencode&&item.opencode.indexOf("|")>-1'>
                                        <em v-for='num1 in item.opencode.split("|")[0].split(",")'>{{num1}}</em>
                                        <em class="ball-blue" v-for='num2 in item.opencode.split("|")[1].split(",")'>{{num2}}</em>
                                    </template>
                                    <template v-else >
                                        <em v-for='num3 in item.opencode.split(",")'>{{num3}}</em>
                                    </template>
                                </div>
                            </li>
                        </ul>
                        <div class="bottom-more" @click='goRecod'>全部历史开奖<i></i></div>
                    </div> 
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import dHeader from '@/components/header'
import {getDate} from '@/assets/js/layout'
import {get} from '@/request/http'
import dBanner from "@/components/banner"
import adFoot from "@/components/adFoot"
export default {
  name: 'detail',
  components: {
    dHeader,
    dBanner,
    adFoot
  },
  data(){
    return {
        title:'',
        id:'',
        pidData:{},
        mengcengState:false,
        pidList5:[],
        zxList:'50,51,52,53,01,03,07',
        hotNewList4:'',
        listTxt:['一等奖','二等奖','三等奖','四等奖','五等奖','六等奖','七等奖','八等奖']

    }
        
  },
  methods:{
    DegetDate(date){
        let week = getDate(date);
        return week
    },
    getPidData(id,pid){
        get('/cpdata/guoguan/'+id+'/'+pid+'/'+pid+'.json?_='+Math.random())
        .then(v=>{
            this.pidData = v.rows; 
        })
    },
    getHotNewList4(lottery){
        get('/discovery/v2/news/szc/'+lottery+'/index.json')
        .then(v=>{
            let data = v ;
            if (data.length>=1&&data.length > 4) {
                this.hotNewList4 = data.slice(0,5)
            }
            if (data.length>=1&&data.length < 4) {
                this.hotNewList4 = data
            }
        })
    },
    showPidList(){
        this.mengcengState = true;
    },
    hidePidList(){
        this.mengcengState = false;
    },
    getPidList(id){
        get('/tdata/'+id+'/last_100.json').then(v=>{
            let data = v.period.row;
            this.pidList5 = data.slice(0,5)
        })
    },
    goRecod(){
        this.$router.push('/record/'+this.id)
    },
    goExplain(id){
        let name = this.lotteryId[id][0];
        this.$router.push('/explain/'+this.id+'&'+name)
    },
    goInformation(id){
        this.$router.push('/information/'+this.id)
    },
    goZst(id){
        window.location.href ='http://m.178ty.com/zst/'+id+'/01.html'
    },
    goHotNew(url){
        this.$router.push({
            'name':'newsDetail',
            'params':{
                'url':url
            }
        })
        // window.location.href = 'http://m.178ty.com'+url
    }


  },
  created(){
    let id = this.$route.params.id;
    let pid = this.$route.params.pid;
    this.id = id;
    this.title = this.lotteryId[id][0];
    this.getPidData(id,pid);
    this.getPidList(id);
    if (this.zxList.indexOf(id)>-1) {
        this.getHotNewList4(this.lotteryId[id][3])
    }
  }
};

</script>
<style lang="less" scoped>
@import '../../assets/style/detailIndex.less';
</style>
